<template>
  <!-- 概览卡片 -->
  <n-grid :x-gap="8" :y-gap="8">
    <n-grid-item :span="4" v-for="card in overviewCards" :key="card.title">
      <n-card :bordered="false">
        <template #header>
          <span class="font-medium">{{ card.title }}</span>
        </template>
        <n-statistic :value="card.value" :formatter="formatMoney">
          <template #suffix v-if="card.suffix">
            <span class="text-sm text-gray-500">{{ card.suffix }}</span>
          </template>
        </n-statistic>
        <div class="text-gray-500 text-sm mt-1">{{ card.desc }}</div>
      </n-card>
    </n-grid-item>
  </n-grid>

  <!-- 月注册 & 年注册 -->
  <n-grid :x-gap="8" :y-gap="8" class="mt-2">
    <n-grid-item :span="12">
      <n-card class="shadow-card">
        <template #header>
          <div class="flex justify-between items-center">
            <span class="font-medium">月注册用户数</span>
            <n-tag size="small" type="success" round>上月本月</n-tag>
          </div>
        </template>
        <LineChart :data="personalMonthRegData"/>
      </n-card>
    </n-grid-item>
    <n-grid-item :span="12">
      <n-card class="shadow-card">
        <template #header>
          <div class="flex justify-between items-center">
            <span class="font-medium">年注册用户数</span>
            <n-tag size="small" type="info" round>去年今年</n-tag>
          </div>
        </template>
        <BarChart :data="personalYearRegData"/>
      </n-card>
    </n-grid-item>
  </n-grid>

  <!-- 最近7天充值金额 & 本月上月充值金额 -->
  <n-grid :x-gap="8" :y-gap="8" class="mt-2">
    <n-grid-item :span="12">
      <n-card class="shadow-card">
        <template #header>
          <div class="flex justify-between items-center">
            <span class="font-medium">最近 7 天充值金额</span>
            <n-tag size="small" type="warning" round>7天统计</n-tag>
          </div>
        </template>
        <LineChart :data="personalDayPayData"/>
      </n-card>
    </n-grid-item>
    <n-grid-item :span="12">
      <n-card class="shadow-card">
        <template #header>
          <div class="flex justify-between items-center">
            <span class="font-medium">本月和上月充值金额</span>
            <n-tag size="small" type="warning" round>上月本月</n-tag>
          </div>
        </template>
        <LineChart :data="personalMonthPayData"/>
      </n-card>
    </n-grid-item>
  </n-grid>

  <!-- 日付费 & 最近7天充值用户 -->
  <n-grid :x-gap="8" :y-gap="8" class="mt-2">
    <n-grid-item :span="12">
      <n-card class="shadow-card">
        <template #header>
          <div class="flex justify-between items-center">
            <span class="font-medium">日付费用户数</span>
            <n-tag size="small" type="primary" round>昨日今日</n-tag>
          </div>
        </template>
        <LineChart :data="personalPayData"/>
      </n-card>
    </n-grid-item>
    <n-grid-item :span="12">
      <n-card class="shadow-card">
        <template #header>
          <div class="flex justify-between items-center">
            <span class="font-medium">最近 7 天的充值用户数</span>
            <n-tag size="small" type="warning" round>7天统计</n-tag>
          </div>
        </template>
        <LineChart :data="personal7DayPayData"/>
      </n-card>
    </n-grid-item>
  </n-grid>

  <!-- 最近7天注册 & 活跃用户 -->
  <n-grid :x-gap="8" :y-gap="8" class="mt-2">
    <n-grid-item :span="12">
      <n-card class="shadow-card">
        <template #header>
          <div class="flex justify-between items-center">
            <span class="font-medium">最近 7 天注册走势</span>
            <n-tag size="small" type="warning" round>7天统计</n-tag>
          </div>
        </template>
        <LineChart :data="register7DayData"/>
      </n-card>
    </n-grid-item>
    <n-grid-item :span="12">
      <n-card class="shadow-card">
        <template #header>
          <div class="flex justify-between items-center">
            <span class="font-medium">最近 7 天每天的活跃用户数</span>
            <n-tag size="small" type="warning" round>7天统计</n-tag>
          </div>
        </template>
        <LineChart :data="active7DayData"/>
      </n-card>
    </n-grid-item>
  </n-grid>

  <!-- 最近12个月注册 & 月平均DAU -->
  <n-grid :x-gap="8" :y-gap="8" class="mt-2">
    <n-grid-item :span="12">
      <n-card class="shadow-card">
        <template #header>
          <div class="flex justify-between items-center">
            <span class="font-medium">连续 12 个月注册走势</span>
            <n-tag size="small" type="success" round>年度统计</n-tag>
          </div>
        </template>
        <BarChart :data="monthRegisterData"/>
      </n-card>
    </n-grid-item>
    <n-grid-item :span="12">
      <n-card class="shadow-card">
        <template #header>
          <div class="flex justify-between items-center">
            <span class="font-medium">最近 1 年内，每个月的平均日活跃用户数（DAU）走势</span>
            <n-tag size="small" type="success" round>年度统计</n-tag>
          </div>
        </template>
        <BarChart :data="monthActiveData"/>
      </n-card>
    </n-grid-item>
  </n-grid>

  <!-- 回到顶部 -->
  <n-back-top :right="50" :bottom="80"/>
</template>

<script setup lang="ts">
import {onMounted, ref} from 'vue'
import {NBackTop, NCard, NGrid, NGridItem, NStatistic, NTag} from 'naive-ui'
import LineChart from '@/views/dashboard/LineChart.vue'
import BarChart from '@/views/dashboard/BarChart.vue'
import request from '@/utils/request'
import {ApiEndpoints} from '@/utils/api'

const overviewCards = ref<any[]>([])

const register7DayData = ref<any[]>([])
const active7DayData = ref<any[]>([])
const monthRegisterData = ref<any[]>([])
const monthActiveData = ref<any[]>([])

const personalMonthRegData = ref<any[]>([])
const personalYearRegData = ref<any[]>([])
const personalPayData = ref<any[]>([])
const personal7DayPayData = ref<any[]>([])

const personalDayPayData = ref<any[]>([])
const personalMonthPayData = ref<any[]>([])

const formatMoney = (val: number) => {
  const isDecimal = val % 1 !== 0
  return val.toLocaleString(undefined, {
    minimumFractionDigits: isDecimal ? 2 : 0,
    maximumFractionDigits: isDecimal ? 2 : 0
  })
}

const loadStat = async () => {
  const res = await request.get(ApiEndpoints.STAT.getStatInfo)
  const data = res.data || {}

  overviewCards.value = [
    {title: '总用户数', value: data.totalRegistrations || 0, desc: '历史累计注册数', suffix: '人'},
    {title: '今日注册数', value: data.dailyRegistrations || 0, desc: '今日新注册用户数', suffix: '人'},
    {title: '最近7天注册数', value: data.totalRegistrationsLast7Days || 0, desc: '7日注册总数', suffix: '人'},
    {title: '7天活跃用户', value: data.totalActiveUsersLast7Days || 0, desc: '7日总活跃用户', suffix: '人'},
    {title: '今日充值金额', value: data.dayAmount || 0, desc: '今日充值金额', suffix: '元'},
    {title: '总充值金额', value: data.totalAmount || 0, desc: '总充值金额', suffix: '元'}
  ]

  register7DayData.value = data.personalRegisterList?.map(item => ({
    x: item.registrationDate,
    y: item.dailyRegistrations
  })) || []
  active7DayData.value = data.personal7DayActiveList?.map(item => ({x: item.day, y: item.dailyActiveUsers})) || []
  monthRegisterData.value = data.personal12MonthRegList?.map(item => ({
    x: item.month,
    y: item.monthlyRegistrations
  })) || []
  monthActiveData.value = data.personalMonthActiveUserList?.map(item => ({
    x: item.month,
    y: item.avgDailyActiveUsers
  })) || []

  personalMonthRegData.value = data.personalMonthRegList?.map(item => ({
    x: item.month,
    y: item.monthlyRegistrations
  })) || []
  personalYearRegData.value = data.personalYearRegList?.map(item => ({x: item.year, y: item.yearlyRegistrations})) || []
  personalPayData.value = data.personalPayList?.map(item => ({x: item.createDate, y: item.dailyNewPayingUsers})) || []
  personal7DayPayData.value = data.personal7DayPayList?.map(item => ({
    x: item.createDate,
    y: item.dailyNewPayingUsers
  })) || []

  personalDayPayData.value = data.personalDayPayList?.map(item => ({x: item.day, y: item.totalAmount})) || []
  personalMonthPayData.value = data.personalMonthPayList?.map(item => ({x: item.month, y: item.totalAmount})) || []
}

onMounted(() => {
  loadStat()
})
</script>

<style scoped>
.n-card {
  margin-bottom: 8px;
  border-radius: 8px;
}

.n-card__header {
  padding: 12px 16px;
  font-weight: 500;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.n-card__content {
  padding: 16px;
}

::v-deep(.n-statistic .n-statistic-value .n-statistic-value__content) {
  font-size: 24px;
  font-weight: 600;
  color: #10b981;
}
</style>
